<template>
    <div class="template-index-Lu">
        <div>
            <a-form :form="cform" ref="form" class="governmentServiceData-form">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item>
                            <template v-slot:label>
                                <span>校&ensp;核&ensp;码</span>
                            </template>
                            <a-input
                                v-model:value="formState.sqdbh"
                                v-decorator="['sqdbh',{ initialValue:formState.sqdbh, rules: rules.sqdbh}]"
                                placeholder="请输入校核码"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="所属科室">
                            <a-select
                                @change="handleChange"
                                v-decorator="['fywflcode',{ initialValue:formState.fywflcode, rules: rules.fywflcode}]"
                                placeholder="请选择所属科室">
                                <a-select-option v-for="(item,index) in codeList" :key="index" :value="item.value">
                                    {{ item.ksName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" style="line-height: 38px;padding-left: 12px !important;">
                        <a-button type="primary" html-type="submit" :disabled="hasErrors()" @click="handleSubmit">
                            获取政务服务数据
                        </a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <commpVxeTable
            :isCanWrap="true"
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            :occupancyHeight="90"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:fsxmc_name="{row}" data-desc="自定操作栏">
                <span v-if="row.flcsfkb == '不可办'" class="fsxmcQ-c-t">[等待中]</span>
                <span v-if="row.fzwxtbzzt == '提前办'" class="fsxmcQ-l-t">[优先办]</span>
                <span v-if="row.fzwxtthzt" class="fsxmcQ-h-t">{{ row.fzwxtthzt }}</span>
                <!-- <a href="#" @click="handleClick(row)">{{ row.fsxmc }}</a> -->
                <span>{{ row.fsxmc }}</span>
            </template>
            <template v-slot:name_fslsj="{row}" data-desc="自定操作栏">
                <span>{{ timeProcessing(row.fslsj) }}</span>
            </template>
            <template v-slot:name_ffssj="{row}" data-desc="自定操作栏">
                <span>{{ row.ffssj }}</span>
            </template>
            <!-- <template v-slot:operation_btn="{row}">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="handleClick(row)">办理</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fhjmc == '方案制定' && !row.fybmzt">
                        <a-button class="blue-btn" type="primary" @click="includeInThePlanClick(row)">列入计划</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fhjmc == '技术审评' || row.fhjmc == '综合评定'">
                        <a-button class="blue-btn" type="primary" @click="reimburseClick(row)">申请报销</a-button>
                    </a-form-item>
                </a-form>
            </template> -->
        </commpVxeTable>
    </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import { syncZwfwSqsx2 } from './service/index'
import assessCheckApi from './service/api'
export default {
    components: {
        commpVxeTable,
    },
    data() {
        return {
            reCommpVxeTable: '',
            cform:this.$form.createForm(this, { name: 'cform' }),
            formState: {},
            rules:{
                sqdbh: [{
                    required: true,
                    message: '请输入校核码',
                    trigger: 'blur',
                }],
                fywflcode: [{
                    required: true,
                    message: '请选择所属科室',
                    trigger: 'blur',
                }],
            },
            dataTableConfig: {
                api: assessCheckApi.flowJkPage,
                rowId: 'id',
                paramet: {}
            },
            columnsVxe:[
            {
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '事项名称', //列头显示文字
                field: 'fsxmc',
                align:'left',
                slots: {
                    default: 'fsxmc_name',
                },
                sortable:true,//排序
                // titleInterval:true,//两个字间隔
            },{
                title: '企业名称', //列头显示文字
                field: 'fqymc',
                align:'left',
            }
            // ,{
            //     title: '申请单号',
            //     field: 'fsqdbh',
            // }
            ,{
                title: '任务编号',
                field: 'fslbh',
                width:90,
            },{
                title: '当前环节',
                field: 'fhjmc',
                width:90,
            },{
                title: '发送人',
                field: 'ffsrmc',
                width:90,
            },{
                title: '经办人',
                field: 'fywflname',
            },{
                title: '剩余天数',
                field: 'syday',
                width:90,
            },{
                title: '接收时间',
                field: 'fslsj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'name_fslsj',
                },
                width:110,
            },
            // {
            //     title: '流程状态',
            //     field: 'flczt',
            // },
            // {
            //     title: '操作',
            //     field: 'id',
            //     slots: {
            //         // 使用插槽模板渲染
            //         default: 'operation_btn',
            //     },
            //     fixed: 'right',
            //     width:162
            // }
        ],
            formItem: [
                {
                    label: '事项名称',
                    model: 'fsxmc',
                },{
                    label: '企业名称',
                    model: 'fqymc',
                },{
                    label: '校核码',
                    model: 'fsqdbh',
                },{
                    label: '任务编号',
                    model: 'fslbh',
                },
            ],
            idList: [],
            codeList: [
                {
                    ksName: '药品生产查验科',
                    value: '001002',
                },{
                    ksName: '药品注册审评查验科',
                    value: '001001',
                },{
                    ksName: '药品流通查验科',
                    value: '001003',
                },{
                    ksName: '医疗器械审评查验科',
                    value: '002',
                },{
                    ksName: '食品化妆品评审查验科',
                    value: '003',
                },
            ]
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            //console.log('重置')
            this.reCommpVxeTable = Date.now()
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        timeProcessing(val){
            if(val){
                val = val.slice(0,11)
            }
            return val
        },
        handleChange(value) {
            //console.log(`selected ${value}`);
            this.formState.fywflcode = value
        },
        hasErrors() {
            if(this.formState.sqdbh && this.formState.fywflcode){
                return false
            } else {
                return true
            }
        },
        handleSubmit(){
            this.cform.validateFields((err, values) => {
                if (!err) {
                    //console.log(values);
                    let data = this.formState
                    syncZwfwSqsx2(data).then(res => {
                        if(res.success){
                            this.reCommpVxeTable = Date.now()
                            this.$message.success(res.message)
                        }
                    })
                }
            });
        },
        handleClick(row){
            //console.log(row)
            // this.$refs.handlingPageRef.getData(row)
        },
    },
}
</script>
<style lang="less">
.governmentServiceData-form {
    margin: 15px;
    .ant-row {
        .ant-col {
            padding: 0px !important;
        }
    }
    .ant-form-item {
        display: flex;
        margin-bottom: 0px;
        .ant-form-item-label {
            width: 112px;
        }
        .ant-form-item-control-wrapper {
            width: 100%;
        }
    }
}
</style>
